<template>
  <div id="app" class="min-h-screen bg-background-cream">
    <!-- 移动端底部导航 -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg z-50 md:hidden">
      <div class="flex justify-around items-center py-2">
        <router-link 
          to="/" 
          class="flex flex-col items-center py-2 px-3 text-text-secondary hover:text-primary-coral transition-colors"
          :class="{ 'text-primary-coral': $route.name === 'home' }"
        >
          <img src="/images/theme_spring_2.jpg" alt="首页" class="w-6 h-6 mb-1" />
          <span class="text-xs">首页</span>
        </router-link>
        
        <router-link 
          to="/category" 
          class="flex flex-col items-center py-2 px-3 text-text-secondary hover:text-primary-coral transition-colors"
          :class="{ 'text-primary-coral': $route.name === 'category' }"
        >
          <img src="/images/icon_book_3.jpg" alt="分类" class="w-6 h-6 mb-1" />
          <span class="text-xs">分类</span>
        </router-link>
        
        <router-link 
          to="/progress" 
          class="flex flex-col items-center py-2 px-3 text-text-secondary hover:text-primary-coral transition-colors"
          :class="{ 'text-primary-coral': $route.name === 'progress' }"
        >
          <img src="/images/badge_trophy_8.jpg" alt="进度" class="w-6 h-6 mb-1" />
          <span class="text-xs">进度</span>
        </router-link>
      </div>
    </nav>
    
    <!-- 桌面端导航栏 -->
    <nav class="hidden md:block bg-white shadow-sm border-b border-gray-100 sticky top-0 z-40">
      <div class="max-w-6xl mx-auto px-6 py-4">
        <div class="flex items-center justify-between">
          <router-link to="/" class="flex items-center space-x-3">
            <img src="/images/character_guide_5.jpg" alt="Logo" class="w-10 h-10 rounded-circle" />
            <h1 class="text-2xl font-bold text-text-primary">跟着古诗去旅行</h1>
          </router-link>
          
          <div class="flex items-center space-x-6">
            <router-link 
              to="/" 
              class="text-lg font-semibold text-text-secondary hover:text-primary-coral transition-colors"
              :class="{ 'text-primary-coral': $route.name === 'home' }"
            >
              首页
            </router-link>
            <router-link 
              to="/category" 
              class="text-lg font-semibold text-text-secondary hover:text-primary-coral transition-colors"
              :class="{ 'text-primary-coral': $route.name === 'category' }"
            >
              分类浏览
            </router-link>
            <router-link 
              to="/progress" 
              class="text-lg font-semibold text-text-secondary hover:text-primary-coral transition-colors"
              :class="{ 'text-primary-coral': $route.name === 'progress' }"
            >
              学习进度
            </router-link>
          </div>
        </div>
      </div>
    </nav>
    
    <!-- 主内容区域 -->
    <main class="pb-20 md:pb-0">
      <router-view />
    </main>
    
    <!-- 音频播放器（固定在底部） -->
    <AudioPlayer v-if="showAudioPlayer" class="fixed bottom-20 md:bottom-0 left-0 right-0 z-30" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import AudioPlayer from '@/components/AudioPlayer.vue'
import { usePoetryStore } from '@/stores/poetry'

const route = useRoute()
const poetryStore = usePoetryStore()
const showAudioPlayer = ref(false)

onMounted(async () => {
  // 加载古诗数据
  await poetryStore.loadPoetryData()
})

// 监听路由变化，决定是否显示音频播放器
watch(() => route.name, (newRoute) => {
  showAudioPlayer.value = newRoute === 'poetry-detail'
}, { immediate: true })
</script>

<style scoped>
/* 确保底部导航在移动端不被内容遮挡 */
@media (max-width: 768px) {
  main {
    padding-bottom: 5rem;
  }
}
</style>